<template>
    <div class="product_detail">
        <van-nav-bar title="商品详情" left-arrow @click-left="router.back()">
            <template #right>
                <van-image :src="setUp" class="menu_cion" @click="rightPop = !rightPop" />
            </template>
        </van-nav-bar>
        <div class="right_pop" v-if="rightPop"
            :style="{ 'height': Number(detailInfo.auditStatus) < 5 ? '12vw' : '24vw' }">
            <div class="right_pop_div" @click="onClickRight">
                <van-image :src="edit" class="menu_cions" />
                <div>编辑</div>
            </div>
            <!-- detailInfo.auditStatus == 5 为已上架 -->
            <div class="right_pop_div" @click="onClickComplement" v-if="Number(detailInfo.auditStatus) >= 5">
                <van-image :src="complement" class="menu_cions" />
                <div>补码</div>
            </div>
        </div>
        <div class="product_detail_top" id="product_detail_top">
            <div class="product_detail_top_img">
                <van-swipe lazy-render ref="ticketSwiper" v-if="realSrcList.length">
                    <van-swipe-item v-for="(image, index) in realSrcList" :key="image">
                        <van-image class="product_detail_top-image" :src="image" @click="enlargeImage(index)" />
                    </van-swipe-item>
                </van-swipe>
                <van-image :src="errImg" v-if="!realSrcList.length"> </van-image>
            </div>
            <div class="product_detail_top_details">
                <div class="info">
                    <span class="price" v-if="hmMechanismsList.cooperationMode == '分佣'">￥{{
                        hmMechanismsList.price }}</span>
                    <span class="price" v-if="hmMechanismsList.cooperationMode == '供货'">￥{{
                        hmMechanismsList.costPrice }}</span>
                    <div class="costPrice" v-if="hmMechanismsList.cooperationMode == '分佣'">
                        成本：{{ hmMechanismsList.costPrice }}
                    </div>

                    <span class="commission" v-if="hmMechanismsList.cooperationMode == '分佣'">佣{{
                        hmMechanismsList.commission + "%" }}</span>
                </div>
                <span class="liveStreamingMechanism">机制：{{
                    detailInfo.liveStreamingMechanism
                    }}</span>
                <div class="styleName">{{ detailInfo.styleName }} <div class="liveStreamingMechanisms"
                        v-if="hmMechanismsList1.cooperationMode"> 多机制
                    </div>
                </div>

                <div class="brand">
                    <span>类目名：{{ detailInfo.productCategoryName }}</span>
                </div>
                <div class="deails-size">
                    <div class="brand">
                        <span>品牌名：{{ detailInfo.brandName }}</span>
                    </div>
                </div>
                <div class="styleCode">商品编码：{{ detailInfo.id }}</div>
                <div class="styleCode">69码：{{ detailInfo.styleCode }}</div>
                <div class="deails-size">
                    <div class="brand">
                        <span>规格/材质：{{ detailInfo.specs }}</span>
                    </div>
                </div>
                <div class="merchant-style">
                    <div class="merchant-style-size">
                        供应商名称：{{ detailInfo.supplierName }}
                    </div>
                    <div class="merchant-style-btn" :style="{
                        background:
                            detailInfo.sellStatus == '已签署' ? '#E7FDEE' : '#EFEFEF',
                        color: detailInfo.sellStatus == '已签署' ? '#19D11B' : '#B8BECA',
                    }">
                        {{ detailInfo.sellStatus }}
                    </div>
                    <!-- <div class="merchant-style-btn1">有AB货</div> -->
                </div>
            </div>
        </div>

        <div class="product_detail_title--heng"></div>
        <div class="product_detail_title--content">
            <div class="product_detail_title-content-size">
                合作信息
            </div>
            <div class="mechanism_title">机制一：</div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name">合作方式：</div>
                <div class="product_detail_title-content-info-content">
                    {{ hmMechanismsList.cooperationMode }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name">直播机制：</div>
                <div class="product_detail_title-content-info-content">
                    {{ hmMechanismsList.liveStreamingMechanism }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name">成本价：</div>
                <div class="product_detail_title-content-info-content">
                    {{ hmMechanismsList.costPrice }}
                </div>
            </div>
            <div class="product_detail_title-content-info" v-if="hmMechanismsList.cooperationMode == '分佣'">
                <div class="product_detail_title-content-info-name">售价：</div>
                <div class="product_detail_title-content-info-content">
                    {{ hmMechanismsList.price }}
                </div>
            </div>
            <div class="product_detail_title-content-info" v-if="hmMechanismsList.cooperationMode == '分佣'">
                <div class="product_detail_title-content-info-name">佣金：</div>
                <div class="product_detail_title-content-info-content">
                    {{ hmMechanismsList.commission }}%
                </div>
            </div>
            <div class="product_detail_title-content-info" v-if="hmMechanismsList.cooperationMode == '分佣'">
                <div class="product_detail_title-content-info-name">补充佣金：</div>
                <div class="product_detail_title-content-info-content">
                    {{ hmMechanismsList.brokerage }}%
                </div>
            </div>

            <div v-if="hmMechanismsList1.cooperationMode">
                <div class="mechanism_title">机制二：</div>
                <div class="product_detail_title-content-info">
                    <div class="product_detail_title-content-info-name">合作方式：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList1.cooperationMode }}
                    </div>
                </div>
                <div class="product_detail_title-content-info">
                    <div class="product_detail_title-content-info-name">直播机制：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList1.liveStreamingMechanism }}
                    </div>
                </div>
                <div class="product_detail_title-content-info">
                    <div class="product_detail_title-content-info-name">成本价：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList1.costPrice }}
                    </div>
                </div>
                <div class="product_detail_title-content-info" v-if="hmMechanismsList1.cooperationMode == '分佣'">
                    <div class="product_detail_title-content-info-name">售价：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList1.price }}
                    </div>
                </div>
                <div class="product_detail_title-content-info" v-if="hmMechanismsList1.cooperationMode == '分佣'">
                    <div class="product_detail_title-content-info-name">佣金：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList1.commission }}%
                    </div>
                </div>
                <div class="product_detail_title-content-info" v-if="hmMechanismsList1.cooperationMode == '分佣'">
                    <div class="product_detail_title-content-info-name">补充佣金：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList1.brokerage }}%
                    </div>
                </div>
            </div>

            <div v-if="hmMechanismsList2.cooperationMode">
                <div class="mechanism_title">机制三：</div>
                <div class="product_detail_title-content-info">
                    <div class="product_detail_title-content-info-name">合作方式：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList2.cooperationMode }}
                    </div>
                </div>
                <div class="product_detail_title-content-info">
                    <div class="product_detail_title-content-info-name">直播机制：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList2.liveStreamingMechanism }}
                    </div>
                </div>
                <div class="product_detail_title-content-info">
                    <div class="product_detail_title-content-info-name">成本价：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList2.costPrice }}
                    </div>
                </div>
                <div class="product_detail_title-content-info" v-if="hmMechanismsList2.cooperationMode == '分佣'">
                    <div class="product_detail_title-content-info-name">售价：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList2.price }}
                    </div>
                </div>
                <div class="product_detail_title-content-info" v-if="hmMechanismsList2.cooperationMode == '分佣'">
                    <div class="product_detail_title-content-info-name">佣金：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList2.commission }}%
                    </div>
                </div>
                <div class="product_detail_title-content-info" v-if="hmMechanismsList2.cooperationMode == '分佣'">
                    <div class="product_detail_title-content-info-name">补充佣金：</div>
                    <div class="product_detail_title-content-info-content">
                        {{ hmMechanismsList2.brokerage }}%
                    </div>
                </div>
            </div>

            <div class="product_detail_title-content-info" style="margin-top: 35px">
                <div class="product_detail_title-content-info-name">贸易方式：</div>
                <div class="product_detail_title-content-info-content">
                    {{ detailInfo.tradeMode }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name">招商部：</div>
                <div class="product_detail_title-content-info-content">
                    {{ detailInfo.recruiterDept }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name">招商员：</div>
                <div class="product_detail_title-content-info-content">
                    {{ detailInfo.recruiter }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name">走仓：</div>
                <div class="product_detail_title-content-info-content">
                    {{ detailInfo.warehouse ? '是' : '否' }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name" style="white-space: nowrap; padding-right: 40px">
                    对接群名：</div>
                <div class="product_detail_title-content-info-content" style="text-align: end">
                    {{ detailInfo.groupName }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name" style="white-space: nowrap; padding-right: 50px">
                    卖点：
                </div>
                <div class="product_detail_title-content-info-content" style="text-align: end">
                    {{ detailInfo.sellingPoints }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name">平台扣点：</div>
                <div class="product_detail_title-content-info-content">
                    {{ detailInfo.tax }}%
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name">历史最低售价：</div>
                <div class="product_detail_title-content-info-content">
                    {{ detailInfo.historyPrice }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name">上架时间：</div>
                <div class="product_detail_title-content-info-content">
                    {{ detailInfo.shoppingTime }}
                </div>
            </div>
        </div>

        <!-- 直播补充信息 -->
        <div class="product_detail_title--heng"></div>
        <div class="product_detail_title--content" id="product_detail_supplement">
            <div class="product_detail_title-content-size">直播补充信息</div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name" style="white-space: nowrap; padding-right: 40px">
                    发货时间：
                </div>
                <div class="product_detail_title-content-info-content" style="text-align: end">
                    {{ detailInfo.deliveryTime }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name" style="white-space: nowrap; padding-right: 50px">
                    发货地区：
                </div>
                <div class="product_detail_title-content-info-content" style="text-align: end">
                    {{ detailInfo.placeDelivery }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name" style="white-space: nowrap; padding-right: 40px">
                    物流/快递：
                </div>
                <div class="product_detail_title-content-info-content" style="text-align: end">
                    {{ detailInfo.logistics }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name" style="white-space: nowrap; padding-right: 40px">
                    适用人群：
                </div>
                <div class="product_detail_title-content-info-content" style="text-align: end">
                    {{ detailInfo.eligibility }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name" style="white-space: nowrap; padding-right: 40px">
                    厂家可用库存：
                </div>
                <div class="product_detail_title-content-info-content" style="text-align: end">
                    {{ detailInfo.factoryStockNum }}
                </div>
            </div>
            <div class="product_detail_title-content-info">
                <div class="product_detail_title-content-info-name" style="white-space: nowrap; padding-right: 40px">
                    不发货地区：
                </div>
                <div class="product_detail_title-content-info-content" style="text-align: end">
                    {{ detailInfo.noSendArea }}
                </div>
            </div>
        </div>

        <!-- 产品资质 -->
        <div class="product_detail_title--heng"></div>
        <div class="product_detail_bottom">
            <div class="product_detail_title-content-size">商品资质</div>
            <span class="tilte">商品实拍</span>
            <div class="product_image">
                <IsImgPdf v-for="(item, index) in realSrcList" :key="index" v-if="realSrcList.length" :url="item" />
                <div v-if="!realSrcList.length">
                    <IsImgPdf url="" />
                </div>
            </div>
            <span class="tilte">备案行政/许可证批件</span>
            <div class="product_image">
                <IsImgPdf v-for="(item, index) in voucherImageList" :key="index" v-if="voucherImageList.length"
                    :url="item" />
                <div v-if="!voucherImageList.length">
                    <IsImgPdf url="" />
                </div>
            </div>
            <span class="tilte">其他资质</span>
            <div class="product_image">
                <IsImgPdf v-for="(item, index) in otherImageList" :key="index" v-if="otherImageList.length"
                    :url="item" />
                <div v-if="!otherImageList.length">
                    <IsImgPdf url="" />
                </div>
            </div>
            <span class="tilte">营业执照</span>
            <div class="product_image">
                <IsImgPdf v-if="detailInfo.businessImage" :url="detailInfo.businessImage" />
                <div v-if="!detailInfo.businessImage">
                    <IsImgPdf url="" />
                </div>
            </div>
            <span class="tilte" v-if="detailInfo.tradeMode == '进口'">进口货物/原材料报关单</span>
            <div class="product_image" v-if="detailInfo.tradeMode == '进口'">
                <IsImgPdf v-for="(item, index) in customsDeclarationImageList" :key="index"
                    v-if="customsDeclarationImageList.length" :url="item" />
                <div v-if="!customsDeclarationImageList.length">
                    <IsImgPdf url="" />
                </div>
            </div>
            <span class="tilte" v-if="detailInfo.tradeMode == '进口'">进口产品备案材料</span>
            <div class="product_image" v-if="detailInfo.tradeMode == '进口'">
                <IsImgPdf v-for="(item, index) in customsInformationImageList" :key="index"
                    v-if="customsInformationImageList.length" :url="item" />
                <div v-if="!customsInformationImageList.length">
                    <IsImgPdf url="" />
                </div>
            </div>
            <span class="tilte" v-if="detailInfo.tradeMode == '进口'">进口产品原材料检验检疫证明</span>
            <div class="product_image" v-if="detailInfo.tradeMode == '进口'">
                <IsImgPdf v-for="(item, index) in customsInspectionImageList" :key="index"
                    v-if="customsInspectionImageList.length" :url="item" />
                <div v-if="!customsInspectionImageList.length">
                    <IsImgPdf url="" />
                </div>
            </div>
            <span class="tilte" v-if="detailInfo.tradeMode == '进口'">检测报告</span>
            <div class="product_image" v-if="detailInfo.tradeMode == '进口'">
                <IsImgPdf v-for="(item, index) in customsTestReportImgaeList" :key="index"
                    v-if="customsTestReportImgaeList.length" :url="item" />
                <div v-if="!customsTestReportImgaeList.length">
                    <IsImgPdf url="" />
                </div>
            </div>
        </div>
        <div class="product_detail_title--heng"></div>
        <div class="product_detail_bottom">
            <div class="product_detail_title-content-size">品牌资质</div>
            <div class="supplier_detail_content_div supplier_detail_content_divorder">
                <div class="label">品牌名称</div>
                <div class="value">{{ brandList.brandName }}</div>
            </div>
            <div class="supplier_detail_content_div supplier_detail_content_divorder">
                <div class="label">品牌商标注册证</div>
                <div class="value">
                    <IsImgPdf :url="brandList.brandImages" width="30" height="30" type="small" />
                </div>
            </div>
            <div class="supplier_detail_content_div supplier_detail_content_divorder">
                <div class="label">商标授权使用证明</div>
                <div class="value">
                    <IsImgPdf :url="brandList.usageImages" width="30" height="30" type="small" />
                </div>
            </div>
            <div class="supplier_detail_content_div supplier_detail_content_divorder">
                <div class="label">使用授权品类</div>
                <div class="value">
                    {{ brandList.usages }}
                </div>
            </div>
            <div class="supplier_detail_content_div supplier_detail_content_divorder">
                <div class="label">店铺销售授权</div>
                <div class="value">
                    <IsImgPdf :url="brandList.sellImages" width="30" height="30" type="small" />
                </div>
            </div>
            <div class="supplier_detail_content_div supplier_detail_content_divorder">
                <div class="label">销售授权品类</div>
                <div class="value">
                    {{ brandList.sells }}
                </div>
            </div>
            <div class="supplier_detail_content_div supplier_detail_content_divorder">
                <div class="label">其他补充资质</div>
                <div class="value">
                    <IsImgPdf :url="brandList.otherImages" width="30" height="30" type="small" />
                </div>
            </div>
            <div class="supplier_detail_content_div ">
                <div class="label">联名款/其他授权</div>
                <div class="value">
                    <IsImgPdf :url="brandList.jointlyImages" width="30" height="30" type="small" />
                </div>
            </div>
        </div>
        <div class="buttonStatus" :style="{
            justifyContent: computAudLeft() != '' ? 'space-around' : 'center',
        }">
            <div @click="audLeft" v-throttle:click v-if="computAudRight() !== ''" :style="{
                width: computAudLeft() !== '' ? '40%' : '0%',
                'background-color': '#FFB0B0',
                color: '#FF0000',
                'text-align': 'center',
                'border-radius': '23px',
            }">
                {{ computAudLeft() }}
            </div>
            <div @click="audRight" v-throttle:click v-if="computAudRight() !== ''" :style="{
                width: computAudLeft() !== '' ? '40%' : '80%',
                'background-color': '#1466FF',
                color: '#fff',
                'text-align': 'center',
                'border-radius': '23px',
            }">
                {{ computAudRight() }}
            </div>
            <div @click="audLeft" v-throttle:click v-if="computAudRight() == '' && computAudLeft() !== ''" :style="{
                width: '80%',
                'background-color': '#FFB0B0',
                color: '#FF0000',
                'text-align': 'center',
                'border-radius': '23px',
            }">
                {{ computAudLeft() }}
            </div>
            <div @click="audLeft" v-throttle:click v-if="computAudRight() == '' && computAudLeft() == ''" :style="{
                width: '0%',
                'background-color': '#FFB0B0',
                color: '#FF0000',
                'text-align': 'center',
                'border-radius': '23px',
            }">
            </div>
            <van-popup v-model:show="showTop" position="top">
                <div class="launch_div">
                    <div class="launch_title">电商主播</div>
                    <div class="pop_div">
                        <div class="pop_div_out" v-for="(item, index) in anchorList" :key="index">
                            <div class="pop_div_item" @click="activeClick(item)" :style="{
                                border: activeList.includes(item.userId)
                                    ? 'none'
                                    : '1px solid #B8BECA',
                                color: activeList.includes(item.userId) ? '#FFFFFF' : '#B8BECA',
                                background: activeList.includes(item.userId) ? '#0094FF' : 'none',
                            }">
                                {{ item.remark }}
                            </div>
                        </div>
                    </div>
                    <div class="launch_title">打榜主播</div>
                    <div class="pop_div">
                        <div class="pop_div_out" v-for="(item, index) in billboardAnchorList" :key="index">
                            <div class="pop_div_item" @click="activeClick(item)" :style="{
                                border: activeList.includes(item.userId)
                                    ? 'none'
                                    : '1px solid #B8BECA',
                                color: activeList.includes(item.userId) ? '#FFFFFF' : '#B8BECA',
                                background: activeList.includes(item.userId) ? '#0094FF' : 'none',
                            }">
                                {{ item.remark }}
                            </div>
                        </div>
                    </div>
                    <div class="launch_title">销售部</div>
                    <div class="pop_div">
                        <div class="pop_div_out" v-for="(item, index) in saleAnchorList" :key="index">
                            <div class="pop_div_item" @click="activeClick(item)" :style="{
                                border: activeList.includes(item.userId)
                                    ? 'none'
                                    : '1px solid #B8BECA',
                                color: activeList.includes(item.userId) ? '#FFFFFF' : '#B8BECA',
                                background: activeList.includes(item.userId) ? '#0094FF' : 'none',
                            }">
                                {{ item.remark }}
                            </div>
                        </div>
                    </div>
                    <div class="button">
                        <div class="cancel" @click="showTop = false">取消</div>
                        <div class="save" @click="submit" v-throttle:click>保存</div>
                    </div>
                </div>
            </van-popup>
        </div>
    </div>
</template>
<script setup lang="ts">
import { computed, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
    getSupplierAddProducts,
    listBrand,
    editTwo,
    editFour,
    editFive,
    editOff,
    getAnchorList,
    editCore,
    editSeven,
    editEight,
    editNine,
    editTen,
} from "@/api/productList/index";
import { showDialog, showFailToast, showSuccessToast } from "vant";
import { getInfo, getbrandId, hmSupplierList } from "@/api/supplierList/index";
import { showImagePreview } from "vant";
import { getEnvValue } from "@/utils/index";
import IsImgPdf from '@/components/isImgPdf/index.vue'
import Qs from "qs";
const route = useRoute();
const router = useRouter();
const detailInfo = ref<any>({});
const realSrcList = ref<string[]>([]);
const voucherImageList = ref<string[]>([]);
const customsDeclarationImageList = ref<string[]>([]);
const customsInformationImageList = ref<string[]>([]);
const customsInspectionImageList = ref<string[]>([]);
const customsTestReportImgaeList = ref<string[]>([]);
const otherImageList = ref<string[]>([]);

const ticketSwiper = ref();
const brandList = ref<any>({});
const rightPop = ref(false)

const showTop = ref(false);
const anchorList = ref<{ remark: string; userId: string }[]>([]);
const billboardAnchorList = ref<{ remark: string; userId: string }[]>([]);
const saleAnchorList = ref<{ remark: string; userId: string }[]>([]);
const activeList = ref<any[]>([]);
const activeNameList = ref<any[]>([]);
// 机制
const hmMechanismsList = ref<any>({})
const hmMechanismsList1 = ref<any>({})
const hmMechanismsList2 = ref<any>({})
const errImg = new URL("@/assets/home/error.png", import.meta.url).href;
const setUp = new URL("@/assets/porduct/setUp.png", import.meta.url).href;
const edit = new URL("@/assets/porduct/edit.png", import.meta.url).href;
const complement = new URL("@/assets/porduct/complement.png", import.meta.url).href;

const roleName = ref();
const buttonList = reactive([
    {
        buttonright: "已邮寄",
        buttonleft: "",
        status: 0,
    },
    {
        buttonright: "待收货",
        buttonleft: "",
        status: 1,
    },
    {
        buttonright: "确认收货",
        buttonleft: "",
        status: 2,
    },
    {
        buttonright: "修改机制",
        buttonleft: "",
        status: 3,
    },
    {
        buttonright: "上架",
        buttonleft: "",
        status: 4,
    },
    {
        buttonright: "主播选品",
        buttonleft: "下架",
        status: 5,
    },
    {
        buttonright: "送审",
        buttonleft: "下架",
        status: 6,
    },
    {
        buttonright: "",
        buttonleft: "下架",
        status: 7,
    },
    {
        buttonright: "入库",
        buttonleft: "",
        status: 8,
    },
    {
        buttonright: "",
        buttonleft: "下架",
        status: 9,
    },
    {
        buttonright: "",
        buttonleft: "",
        status: 10,
    },
    {
        buttonright: "",
        buttonleft: "",
        status: 11,
    },
    {
        buttonright: "上架",
        buttonleft: "",
        status: 99,
    },
    {
        buttonright: "上架",
        buttonleft: "",
        status: '-1',
    },
]);


/** 图片放大 */
const enlargeImage = (index: number) => {
    showImagePreview({
        images: realSrcList.value,
        startPosition: index,
    });
};
/** 图片放大 */
// const enlargeImages = (img: string) => {
//     if (img) {
//         showImagePreview({
//             images: [img],
//         });
//     }
// };

/** 商品id */
const uniquekey = computed(() => {
    return route.params.id;
});


/** 多图片并发请求更改 */
const fetchImagesSequentially = async (real_src: any, list: any) => {
    for (const item of real_src) {
        if (item) {
            const url = getEnvValue("VITE_APP_PIC_URL") + item
            list.push(url);
        }
    }
};
/** 获取详情 */
const getDetail = async () => {
    const res = await getSupplierAddProducts(uniquekey.value as any);
    detailInfo.value = res.data;
    if (res.data.hmMechanismsList.length) {
        hmMechanismsList.value = res.data.hmMechanismsList[0]
        hmMechanismsList1.value = res.data.hmMechanismsList[1]
        hmMechanismsList2.value = res.data.hmMechanismsList[2]
    }
    // 根据供应商id获取供应商详情
    const response = await hmSupplierList({ id: res.data.supplierId })
    if (response.rows[0] && response.rows[0].businessImage) {
        detailInfo.value.businessImage = getEnvValue("VITE_APP_PIC_URL") + response.rows[0].businessImage;
    }
    if (res.data.productImage) {
        const real_src = res.data.productImage.split(",");
        fetchImagesSequentially(real_src, realSrcList.value);
    }
    if (detailInfo.value.voucherImage) {
        const img1 = res.data.voucherImage.split(",");
        fetchImagesSequentially(img1, voucherImageList.value);
    }
    if (detailInfo.value.customsDeclarationImage) {
        const img2 = res.data.customsDeclarationImage.split(",");
        fetchImagesSequentially(img2, customsDeclarationImageList.value);
    }
    if (detailInfo.value.customsInformationImage) {
        const img3 = res.data.customsInformationImage.split(",");
        fetchImagesSequentially(img3, customsInformationImageList.value);
    }
    if (detailInfo.value.customsInspectionImage) {
        const img4 = res.data.customsInspectionImage.split(",");
        fetchImagesSequentially(img4, customsInspectionImageList.value);
    }
    if (detailInfo.value.customsTestReportImgae) {
        const img5 = res.data.customsTestReportImgae.split(",");
        fetchImagesSequentially(img5, customsTestReportImgaeList.value);
    }
    if (detailInfo.value.otherImage) {
        const img6 = res.data.otherImage.split(",");
        fetchImagesSequentially(img6, otherImageList.value);
    }

    await getListBrand(res.data.supplierId, res.data.brandName)
};
getDetail();

const getUser = async () => {
    const res = await getInfo();
    roleName.value = res.data.user.roles[0].roleName;
};
getUser();
const computAudLeft: any = () => {

    const match = buttonList.find(
        (element) => element.status == detailInfo.value.auditStatus
    );
    return match?.buttonleft; // 如果找到匹配项，返回其 buttonright，否则返回默认值
};
const computAudRight: any = () => {
    const match = buttonList.find(
        (element) => element.status == detailInfo.value.auditStatus
    );
    return match?.buttonright; // 如果找到匹配项，返回其 buttonright，否则返回默认值
    // }
};
const activeClick = (item: any) => {
    activeList.value = [item.userId]
    activeNameList.value = [item.remark]
};
/** 清空所有图片 */
const clearImgs = () => {
    realSrcList.value = [];
    voucherImageList.value = [];
    customsDeclarationImageList.value = [];
    customsInformationImageList.value = [];
    customsInspectionImageList.value = [];
    customsTestReportImgaeList.value = [];
    otherImageList.value = [];
}
const submit = async () => {
    if (activeList.value.length > 0) {
        await editCore({
            id: uniquekey.value,
            coreId: activeList.value.join(","),
            coreName: activeNameList.value.join(","),
        });
        showSuccessToast({ type: "success", message: "主播选品成功" });
        clearImgs();
        getDetail();
        showTop.value = false;
    } else {
        showFailToast({ message: "请选择主播" });
    }
};
const audLeft = async () => {
    if (computAudLeft() == "主播选品") {
        const res = await getAnchorList({ deptId: "1782395835898970113" });
        anchorList.value = res.rows.filter(item => {
            return item.remark.substr(0, 2) == '电商'
        });
        billboardAnchorList.value = res.rows.filter(item => {
            return item.remark.substr(0, 2) == '打榜'
        })
        saleAnchorList.value = res.rows.filter(item => {
            return item.remark.indexOf('组') !== -1
        })
        showTop.value = true;
        activeList.value = detailInfo.value.coreId ? detailInfo.value.coreId.split(",") : [];
        activeNameList.value = detailInfo.value.coreName ? detailInfo.value.coreName.split(",") : [];
    } else if (computAudLeft() == "下架") {
        await editOff(Qs.stringify({ ids: [uniquekey.value] }, { arrayFormat: 'repeat' }));
        showSuccessToast({ type: "success", message: "商品下架成功" });
        clearImgs();
        getDetail();
    } else if (computAudLeft() == "不通过") {
        await editNine({ id: uniquekey.value });
        showSuccessToast({ type: "success", message: "商品审核不通过成功" });
        clearImgs();
        getDetail();
    }
};
const audRight = async () => {
    if (computAudRight() == "已邮寄") {
        router.push(`/orderNumber/${uniquekey.value}`);
    } else if (computAudRight() == "已到样") {
        await editTwo({ id: uniquekey.value });
        showSuccessToast({ type: "success", message: "商品到样确认成功" });
        clearImgs();
        getDetail();
    } else if (computAudRight() == "确认收货") {
        await editFour(Qs.stringify({ ids: [uniquekey.value] }, { arrayFormat: 'repeat' }));
        showSuccessToast({ type: "success", message: "商品确认收货成功" });
        clearImgs();
        getDetail();
    } else if (computAudRight() == "上架") {
        // 手动输入的商品吗
        if (detailInfo.value.isStyleCode == null) {
            await editFive(Qs.stringify({ ids: [uniquekey.value] }, { arrayFormat: 'repeat' }));
            showSuccessToast({ type: "success", message: "商品上架成功" });
            clearImgs();
            getDetail();
        } else {
            await editFive(Qs.stringify({ ids: [uniquekey.value] }, { arrayFormat: 'repeat' }));
            showSuccessToast({ type: "success", message: "商品上架成功" });
            clearImgs();
            getDetail();
            onClickComplement()
        }
    } else if (computAudRight() == "下架") {
        await editOff(Qs.stringify({ ids: [uniquekey.value] }, { arrayFormat: 'repeat' }));
        showSuccessToast({ type: "success", message: "商品下架成功" });
        clearImgs();
        getDetail();
    } else if (computAudRight() == "送审") {
        await editSeven(Qs.stringify({ ids: [uniquekey.value] }, { arrayFormat: 'repeat' }));
        showSuccessToast({ type: "success", message: "商品送审成功" });
        clearImgs();
        getDetail();
    } else if (computAudRight() == "通过") {
        await editEight({ id: uniquekey.value });
        showSuccessToast({ type: "success", message: "商品审核通过成功" });
        clearImgs();
        getDetail();
    } else if (computAudRight() == "入库") {
        if (detailInfo.value.sellStatus == '已签署') {
            await editTen(Qs.stringify({ ids: [uniquekey.value] }, { arrayFormat: 'repeat' }));
            showSuccessToast({ type: "success", message: "产品入库中" });
            clearImgs();
            getDetail();
        } else if (detailInfo.value.sellStatus == '未签署') {
            if (detailInfo.value.contractAuditingStatus == '3') {
                await editTen(Qs.stringify({ ids: [uniquekey.value] }, { arrayFormat: 'repeat' }));
                showSuccessToast({ type: "success", message: "产品入库中" });
                clearImgs();
                getDetail();
            } else {
                showDialog({
                    title: '无法入库',
                    message: '当前商品暂无供销合同，请关注供销合同上传或无合同审批进展...',
                })
            }
        } else {
            showDialog({
                title: '无法入库',
                message: '当前商品暂无供销合同，请关注供销合同上传或无合同审批进展...',
            })
        }

    } else if (computAudRight() == "修改机制") {
        router.push({
            path: `/editProduct/${uniquekey.value}`,
            query: { type: "type" },
        });
    } else if (computAudRight() == "主播选品") {
        const res = await getAnchorList({ deptId: "1782395835898970113" });
        anchorList.value = res.rows.filter(item => {
            return item.remark.substr(0, 2) == '电商'
        });
        billboardAnchorList.value = res.rows.filter(item => {
            return item.remark.substr(0, 2) == '打榜'
        })
        saleAnchorList.value = res.rows.filter(item => {
            return item.remark.indexOf('组') !== -1
        })
        showTop.value = true;
        activeList.value = detailInfo.value.coreId.split(",");
        activeNameList.value = detailInfo.value.coreName.split(",");
    }
};
/** 补码跳转 */
const onClickComplement = () => {
    //  69码
    let styleCode = detailInfo.value.id;
    // 价格
    let price =
        hmMechanismsList.value.cooperationMode == "分佣"
            ? hmMechanismsList.value.price
            : hmMechanismsList.value.costPrice;
    // 佣金
    let commission =
        hmMechanismsList.value.cooperationMode == "分佣"
            ? hmMechanismsList.value.commission + "%"
            : "";
    // 机制
    let liveStreamingMechanism = hmMechanismsList.value.liveStreamingMechanism;
    // 商品名
    let styleName =
        detailInfo.value.styleName.length > 18
            ? detailInfo.value.styleName.substr(0, 18)
            : detailInfo.value.styleName;
    // 品牌名
    var brandName = detailInfo.value.brandName ? detailInfo.value.brandName : "";
    if (brandName.length > 18) {
        brandName = brandName.substr(0, 18);
    }
    // 上架时间
    let listingTime = detailInfo.value.shoppingTime ? "上架时间:" + detailInfo.value.shoppingTime : "上架时间:";
    // 规格/材质
    const gecs = detailInfo.value.specs ? detailInfo.value.specs : '';
    const specs = gecs.length > 190 ? gecs.substring(0, 190) : gecs
    let specsing =
        "规格/材质:" + specs;
    // 卖点
    let sellingPoint = "卖点:" + detailInfo.value.sellingPoints;
    //招商元姓名
    let recruiter = '招商:' + detailInfo.value.recruiter
    const arr: Array<string> = [];
    if (detailInfo.value.hmMechanismsList.length > 0) {
        detailInfo.value.hmMechanismsList.forEach((item, index) => {
            if (item.cooperationMode) {
                const obj = {
                    title: index == 0 ? '机制一:' : index == 1 ? '机制二:' : '机制三:',
                    number: item.cooperationMode == '分佣' ? `${item.price || 0.00}` : `${item.costPrice || 0.00}`,
                    commission: item.cooperationMode == '分佣' ? `${item.commission || 0.00}%` : '',
                    brokerage: item.cooperationMode == '分佣' ? `+${item.brokerage || 0.00}%` : '',
                    liveStreamingMechanism: index == 0 ? item.liveStreamingMechanism || '' : item.liveStreamingMechanism.substring(0, 8) || ''
                }
                arr.push(obj.title)
                arr.push(obj.number)
                arr.push(obj.commission)
                arr.push(obj.brokerage)
                arr.push(obj.liveStreamingMechanism)
            }
        })
    }

    (window as any).uni.navigateTo({
        url: `/pages/print/index?barCode=${encodeURIComponent(
            styleCode
        )}&num1=${encodeURIComponent(price)}&num2=${encodeURIComponent(
            commission
        )}&num3=${encodeURIComponent(
            liveStreamingMechanism
        )}&name=${encodeURIComponent(styleName)}&brand=${encodeURIComponent(
            brandName
        )}&listingTime=${encodeURIComponent(
            listingTime
        )}&recruiter=${encodeURIComponent(
            recruiter
        )}&specsing=${encodeURIComponent(
            specsing
        )}&mechanismList=${encodeURIComponent(
            arr.join(',')
        )}&sellingPoint=${encodeURIComponent(sellingPoint)}&page=1&from=merchants`,
    });
}
/** 编辑 */
const onClickRight = () => {
    router.push(`/editProduct/${uniquekey.value}`);
};
/** 获取品牌信息 */
const getListBrand = async (supplierId: string, brandName: string) => {
    const res = await listBrand({ supplierId: supplierId });
    if (res.rows.length > 0) {
        const brandLists = res.rows.filter(
            (item: any) => item.brandName == brandName
        );
        const brandInfo = await getbrandId(brandLists[0].id);
        // 品牌商标注册证
        if (brandInfo.data.brandImage) {
            brandInfo.data.brandImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.brandImage;
        }
        // 商标授权使用证明
        if (brandInfo.data.usageImage) {
            brandInfo.data.usageImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.usageImage;
        }
        // 店铺销售授权
        if (brandInfo.data.sellImage) {
            brandInfo.data.sellImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.sellImage;
        }
        // 其他补充资质
        if (brandInfo.data.otherImage) {
            brandInfo.data.otherImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.otherImage;
        }
        // 联名款/其他授权
        if (brandInfo.data.jointlyImage) {
            brandInfo.data.jointlyImages = getEnvValue("VITE_APP_PIC_URL") + brandInfo.data.jointlyImage;
        }
        brandList.value = brandInfo.data;
    } else {
        brandList.value = [];
    }
};

</script>
<style lang="less" scoped>
.button {
    font-size: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    width: 100%;
    margin-top: 10px;

    .cancel {
        width: 162px;
        height: 44px;
        border-radius: 23px;
        border: 1px solid #1A1B1C;
        background-color: #fff;
        color: #000;
        font-size: 14px;
        color: #1A1B1C;
        line-height: 44px;
        text-align: center;
    }

    .save {
        width: 162px;
        height: 44px;
        background: #0094FF;
        border-radius: 23px;
        color: #FFFFFF;
        font-size: 14px;
        line-height: 44px;
        text-align: center;
    }
}

:deep(.van-search__field) {
    background-color: #fff;
    border-radius: 20px;
    padding-left: 15px;
    padding-right: 60px;
}

.launch_div {
    padding: 0px 10px 0 10px;
    box-sizing: border-box;
    padding-top: 90px;
}

.launch_title {
    font-size: 14px;
    color: #1A1B1C;
}

.pop_div {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;

    .pop_div_out {
        width: 25%;
        min-width: 78px;
        display: flex;
        justify-content: center;
        height: 30px;
        border-radius: 15px;
        line-height: 30px;
        font-size: 14px;
        margin-bottom: 15px;
    }

    .pop_div_item {
        width: 78px;
        display: flex;
        justify-content: center;
        height: 30px;
        border-radius: 15px;
        line-height: 30px;
        font-size: 12px;
    }
}

.product_detail {
    width: 100%;
    height: calc(100vh - 44px);
    background-color: #f6faff;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
    justify-content: center;
    align-content: flex-start;
    overflow-y: scroll;

    .right_pop {
        position: absolute;
        top: 90px;
        right: 0px;
        width: 77px;
        height: 88px;
        background: #F6FAFF;
        z-index: 9;
        display: flex;
        flex-wrap: wrap;

        .right_pop_div {
            display: flex;
            font-size: 14px;
            color: #0094FF;
            align-items: center;
            width: 100%;
            justify-content: center;
        }
    }

    .menu_cion {
        width: 14px;
        height: 14px;
        position: absolute;
        right: 15px;
    }

    .menu_cions {
        width: 14px;
        height: 14px;
        margin-right: 3px;
    }

    :deep(.van-nav-bar) {
        background-color: #1466ff;
        height: 46px !important;
        width: 100%;
        position: fixed !important;
    }

    :deep(.van-nav-bar__title) {
        color: #000;
    }

    :deep(.van-nav-bar__text) {
        color: #000;
    }

    :deep(.van-icon) {
        color: #000;
    }

    &_top {
        width: 98%;
        border-radius: 3px;
        height: 50%;
        background-color: #fff;
        padding: 20px;
        box-sizing: border-box;
        margin-top: 46px;

        &_img {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-around;

            img {
                width: 200px;
                height: 200px;
            }

            :deep(.van-swipe) {
                width: 200px;
                height: 200px;
            }

            :deep(.van-image) {
                width: 200px;
                height: 200px;
            }
        }

        &_details {
            width: 100%;
            margin-top: 20px;

            .info {
                vertical-align: bottom;
                display: flex;
                align-items: center;

                .price {
                    font-weight: 500;
                    font-size: 21px;
                    color: #fc2540;
                }

                .costPrice {
                    color: #a3a3a3;
                    font-size: 10px;
                    margin-left: 10px;
                }


                .commission {
                    color: #ff0000;
                    font-size: 13px;
                    margin-left: auto;
                }
            }

            .liveStreamingMechanism {
                color: #a3a3a3;
                font-size: 10px;
                margin-left: 10px;
            }

            .styleName {
                font-weight: 700;
                line-height: 28px;
                font-size: 18px;
                color: #1a1b1c;
                margin-top: 5px;
                margin-bottom: 5px;

                .liveStreamingMechanisms {
                    width: 66px;
                    height: 26px;
                    background: #0094FF;
                    border-radius: 13px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #FFFFFF;
                    line-height: 26px;
                    text-align: center;
                    display: inline-block;
                }
            }

            .brand,
            .styleCode {
                font-weight: 400;
                font-size: 12px;
                color: #b8beca;
                margin-top: 5px;
                // color: #a3a3a3;
                // font-size: 13px;
                // line-height: 20px;
            }

            .brand_right {
                margin-left: 20px;
            }
        }
    }

    &_title {
        padding: 10px 15px 0px 15px;
        width: 100%;
        font-weight: 500;
        font-size: 16px;
        color: #1a1b1c;
    }

    &_bottom {
        width: 98%;
        border-radius: 3px;
        // height: calc(58vh - 85px);
        background-color: #fff;
        padding: 15px 15px 60px 12px;
        box-sizing: border-box;

        .supplier_detail_content_div {
            min-height: 45px;
            // height: 50%;
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;

            .label {
                width: 115px;
            }

            .value {
                width: calc(100% - 115px);
                color: #B8BECA;
                // text-align: right;
                display: flex;
                justify-content: flex-end;

                .van-image {
                    width: 30px;
                    height: 30px;
                }
            }
        }

        .supplier_detail_content_divorder {
            border-bottom: 1px solid #DDDDDD;
        }

        .tilte {
            display: inline-block;
            margin: 8px 0;
            font-weight: 400;
            font-size: 14px;
            color: #1a1b1c;
            padding-bottom: 5px;
        }

        .product_image {
            display: flex;
            align-items: center;
            // justify-content: space-between;
            width: 100%;
            margin-left: -10px;
            // margin-left: 10%;
            flex-wrap: wrap;

            .product_image_div {
                // margin-right: 5px;
            }
        }

        .vouche_image {
            width: 80%;
            margin-left: 10%;
        }
    }

    .buttonStatus {
        width: 100%;
        height: 40px;
        position: fixed;
        bottom: 10px;
        display: flex;
        line-height: 40px;
    }

    :deep(.product_detail_top) {
        width: 100% !important;
        // width: 100%;
        // border: solid 1px black;
        // height: 570px;
        height: auto;
    }


    .product_detail_top_img {
        width: 340px;
        height: 340px;
    }


    .van-swipe-item {
        width: 340px !important;
        height: 340px !important;

        .van-image {
            width: 340px;
            height: 340px;
        }
    }

    .van-swipe {
        width: 340px;
        height: 340px;
    }


    .product_detail_top_details {
        // border: solid 1px black;
    }

    .deails-size {
        display: flex;
        // margin-top: 10px;
    }

    .styleCode {
        margin-left: auto;
        font-weight: 400;
        font-size: 12px;
        color: #b8beca;
    }

    .merchant-style {
        display: flex;
        align-items: center;
        margin-top: 5px;
    }

    .merchant-style-size {
        font-size: 12px;
        color: #b8beca;
        line-height: 12px;
    }

    .merchant-style-btn {
        margin-left: 30px;
        width: 66px;
        height: 26px;
        background: #e7fdee;
        border-radius: 13px;
        color: #19d11b;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .merchant-style-btn1 {
        margin-left: 10px;
        width: 66px;
        height: 26px;
        background: #ebf4ff;
        border-radius: 13px;
        color: #0094ff;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .product_detail_title--content {
        // display: flex;
        // border: solid 1px black;
        width: 100%;
        background: #fff;
        padding: 15px;

        .mechanism_title {
            font-weight: 500;
            font-size: 14px;
            color: #0094FF;
            margin-top: 20px;
        }
    }

    .product_detail_title-content-size {
        font-weight: 500;
        font-size: 16px;
        color: #1a1b1c;
        display: flex;
        align-items: center;

        .product_detail_title_dis {
            display: flex;
            align-items: center;

            .name {
                font-size: 12px;
                margin: 5px;
            }
        }

        // border: solid 1px black;
        .auditStatus {
            font-size: 12px;
            border-radius: 2px;
            padding: 3px 13px 3px 13px;
            text-align: center;
            border-radius: 3px;
        }
    }

    .product_detail_title--heng {
        width: 100%;
        height: 7px;
        background: #f6faff;
    }

    .product_detail_title-content-info {
        margin-top: 20px;
        display: flex;
    }

    .product_detail_title-content-info-name {
        font-weight: 400;
        font-size: 14px;
        color: #1a1b1c;
        line-height: 14px;
        width: 100px;
    }

    .product_detail_title-content-info-content {
        flex: 1;
        min-width: 0;
        font-weight: 400;
        font-size: 14px;
        color: #b8beca;
        line-height: 14px;
        margin-left: auto;
        display: flex;
        justify-content: flex-end;
        word-break: break-all;
    }

    .product_image_div {
        // border: solid 1px black;
        // margin-left: 10px;
    }

    .vouche_image {
        // border: solid 1px black;
        width: 100%;
        margin-left: -10px;
    }

    .vouche_image-style {
        width: 90px;
        height: 90px;
        margin-left: 10px;
        // border: solid 1px black;
    }

    :deep(.van-nav-bar__text) {
        color: #0094ff !important;
    }
}
</style>